<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>工单列表</title>
<link href="${ctx}/statics/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/statics/uimaker/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/statics/uimaker/icon.css">
<link rel="stylesheet" href="${ctx}/statics/css/providers1.css">
<link rel="stylesheet" href="${ctx}/statics/css/basic_info.css">
<style type="text/css">
	a {
		text-decoration: none;
	}
</style>
</head>
<body>
	<div class="container">
		<table id="dg" style="width: 100%; height: 529px"
			data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:true,
                pagination:true,
                fitColumns:true,
                striped:false,
                checkOnSelect:true,
                selectOnCheck:true,
                collapsible:true,
                toolbar:'#tb',
                url:'${ctx}/order/pdpage',
				method:'post',
                pageSize:10">
			<thead>
				<tr>
					<th field="ajOrderId" width="140">订单号</th>
					<th field="businessId" width="100" formatter="businessFormatter">商家</th>
					<th field="buyerName" width="100">车主</th>
					<th field="buyerMobile" width="112">手机</th>
					<th field="buyerAddress" width="170">地址</th>
					<th field="buyerCar" width="136">车型</th>
					<th field="createTime" width="120">下单时间</th>
					<th field="id" align="center" width="60" formatter="optFormatter">操作</th>
				</tr>
			</thead>
		</table>
		<div id="tb" style="padding: 0 30px;">
			<div class="conditions">
				<span class="con-span">订单号: </span><input id="orderId"
					class="easyui-textbox" type="text" name="orderId"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <span
					class="con-span">手机: </span><input id="mobile"
					class="easyui-textbox" type="text" name="mobile"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <a
					href="javascript:doSearch();" class="easyui-linkbutton"
					iconCls="icon-search" data-options="selected:true">查询</a> <a
					href="javascript:resetSearch()" class="easyui-linkbutton"
					iconCls="icon-reload">重置</a> <a href="#"
					class="easyui-linkbutton more" iconCls="icon-more">更多</a>
			</div>
			<div class="conditions hide">
				<span class="con-span">商家名称: </span> <input id="storeId"
					class="easyui-combobox" style="height: 30px; width: 166px;"
					name="language">
				<!--             <select id="storeId" class="easyui-combobox" name="language" style="height:35px;width:166px;"> -->
				<!--             </select> -->
				<span class="con-span">下单时间: </span><input id="beginTime"
					class="easyui-datebox"
					style="width: 166px; height: 30px; line-height: 30px;">至&nbsp;&nbsp;&nbsp;<input
					id="endTime" class="easyui-datebox"
					style="width: 166px; height: 30px; line-height: 30px;">
			</div>
		</div>
	</div>
	<div id="w" class="easyui-dialog" title="派单"
		data-options="modal:true,closed:true,buttons:'#dlg-buttons'"
		style="width: 700px; height: 400px; padding: 10px;">
		<div class="container">
			<div class="content">
				<div class="easyui-tabs1" style="width: 100%;">
					<div title="基本信息" data-options="closable:false" class="basic-info">
						<form id="form0" method="post">
							<input type="hidden" name="id"/>
							<table class="kv-table">
								<tbody>
									<tr>
										<td class="kv-label">订单号</td>
										<td class="kv-content"><input readonly="readonly" id="ajOrderId" name="ajOrderId"
											class="easyui-textbox" type="text" required="true"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
										<td class="kv-label">商家</td>
										<td class="kv-content"><input readonly="readonly" id="businessId" name="businessId"
											class="easyui-textbox businessSelect" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">车主</td>
										<td class="kv-content" colspan="3"><input readonly="readonly" id="buyerName" name="buyerName"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">手机</td>
										<td class="kv-content"><input readonly="readonly" id="buyerMobile" name="buyerMobile"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
										<td class="kv-label">车型</td>
										<td class="kv-content"><input readonly="readonly" id="buyerCar" name="buyerCar"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">地址</td>
										<td class="kv-content" colspan="3"><input readonly="readonly"
											id="buyerAddress" name="buyerAddress" class="easyui-textbox" type="text"
											style="width: 332px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">安装产品</td>
										<td class="kv-content" colspan="3"><input
											id="buyerProduct" name="buyerProduct" readonly="readonly" class="easyui-textbox" type="text"
											style="width: 332px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">备注</td>
										<td class="kv-content" colspan="3"><input
											id="buyerRemark" name="buyerRemark" readonly="readonly" class="easyui-textbox" type="text"
											style="width: 332px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">门店</td>
										<td class="kv-content" colspan="3">
											<select class="sheng"
											style="width: 80px; height: 30px; line-height: 30px;"></select>
											<select class="shi"
											style="width: 80px; height: 30px; line-height: 30px;"></select>
											<select class="quxian"
											style="width: 80px; height: 30px; line-height: 30px;"></select>
											<a href="#" id="storeSearchBtn" class="easyui-linkbutton">查询</a>
											<div class="column"><span class="current">门店信息</span></div>
									      	<table class="kv-table" id="storeTable">
												<tbody>
												</tbody>
											</table>
											安装价格：<input
											id="installPrice" name="installPrice" class="easyui-textbox" type="text"
											style="width: 332px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
								</tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton pd-btn" href="javascript:void(0)"
			onclick="javascript:void(0)" style="width: 80px" data-options="selected:true">提交</a> <a
			class="easyui-linkbutton" href="javascript:void(0)"
			onclick="javascript:$('#w').dialog('close');" style="width: 80px">取消</a>
	</div>
	<script type="text/javascript" src="${ctx}/statics/js/jquery.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="${ctx}/statics/js/art-template-web.js"></script>
	<script id="store_tpl" type="text/html">
{{each $data obj}}
<tr>
	<td class="kv-label" rowspan="3" >
	<input type="checkbox" value="{{obj.id}}">
	</td>
	<td class="kv-label">店名</td>
	<td class="kv-content">{{obj.name}}</td>
	<td class="kv-label">门店编号</td>
	<td class="kv-content">{{obj.storecode}}</td>
</tr>
<tr>
	<td class="kv-label">联系人</td>
	<td class="kv-content">{{obj.linkName}}</td>
	<td class="kv-label">电话</td>
	<td class="kv-content">{{obj.mobile}}</td>
</tr>
<tr>
	<td class="kv-label">地址</td>
	<td class="kv-content" colspan="3">{{obj.address}}</td>
</tr>
{{/each}}
	</script>
	<script type="text/javascript">
	
		var optFormatter = function(val, row) {
			return "<a class='pd-btn' href='javascript:void(0);'>派单<\/a>";
		}
		
		$(function() {
			
			$('.pd-btn').click(function() {
				var id = $('[name="id"]').val();
				var storeId = $('input[type="checkbox"]:checked').val();
				// alert(storeId);
				var installPrice = $('#installPrice').val();
				if (storeId) {
					if (installPrice == '') {
						$.messager.alert('提示', '请填写安装价格', 'info');
						return;
					}
					$.post('${ctx}/order/pd', {
						"id": id,
						"storeId": storeId,
						"installPrice": installPrice
					}, function(data){
						if (data.result) {
							$.messager.show({
								title: '提示',
								msg: data.msg,
								timeout:5000,
								showType:'slide'
							});
							$('#w').dialog('close');
							$('#dg').datagrid();
						} else {
							$.messager.alert('错误', data.msg, 'error');
						}
					}, 'json');
				} else {
					$.messager.alert('提示', '请选择一个门店进行派单', 'info');
				}
			});
			
			$('#storeSearchBtn').click(function() {
				var regionId = "";
				if ($('.sheng').val() != '') {
					regionId = $('.sheng').val();
				}
				if ($('.shi').val() != '') {
					regionId = $('.shi').val();
				}
				if ($('.quxian').val() != '') {
					regionId = $('.quxian').val();
				}
				if (regionId == "") {
					$.messager.alert('错误', '省级单位不能为空', 'error');
				}
				// 
				$.getJSON('${ctx}/store/list', {"regionId":regionId}, function(data) {
					var html = template('store_tpl', data)
					$('#storeTable').find('tbody').empty().append(html);
				})
			});
			
			$('#storeTable').on('click', 'input[type="checkbox"]', function() {
				if($(this).is(":checked")) {
					$('#storeTable').find('input:checked').not(this).attr('checked', false);
				}
			});
			
			
			$.getJSON("${ctx}/region/getregions", {"parId":"0"}, function(data) {
				var s = "<option value=''>请选择</option>";
				var h = s;
				for (var o in data) {
					var id = data[o].id;
					var name = data[o].name;
					h += "<option value='" + id + "'>" + name + "</option>";
				}
				//alert(h);
				$('.sheng').html(h);
				$('.shi').html(s);
				$('.quxian').html(s);
			});
			
			$('.sheng').on('change', function() {
				var s = "<option value=''>请选择</option>";
				$('.shi').html(s);
				$('.quxian').html(s);
				$.getJSON('${ctx}/region/getregions', {"parId":$(this).val()}, function(data) {
					var s = "<option value=''>请选择</option>";
					var h = s;
					for (var o in data) {
						var id = data[o].id;
						var name = data[o].name;
						h += "<option value='" + id + "'>" + name + "</option>";
					}
					//alert(h);
					$('.shi').html(h);
				});
			});
			
			$('.shi').on('change', function() {
				$.getJSON('${ctx}/region/getregions', {"parId":$(this).val()}, function(data) {
					var s = "<option value=''>请选择</option>";
					var h = s;
					for (var o in data) {
						var id = data[o].id;
						var name = data[o].name;
						h += "<option value='" + id + "'>" + name + "</option>";
					}
					//alert(h);
					$('.quxian').html(h);
				});
			})
			
			
			$('.container').on('click', '.pd-btn', function() {
				// alert('有人点了我一下');
				// alert(this.getAttribute('data-id'))
				//var id = $(this).attr("data-id");
				//$('#w').dialog('open').dialog('setTitle', '派单');
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$("#w").dialog('open').dialog('setTitle', '工单修改');
					$('#form0').form('load', row);
					
					$('#storeTable').find('tbody').empty();
					$('.sheng').val('');
					$('.sheng').change();
				} else {
					$.messager.alert('提示','请选择一条数据','info');
				}
			});
		});
	
		var businessJSON;
		var businessFormatter = function(val, row) {
			if (businessJSON) {
				for (var item in businessJSON) {
					if (val == businessJSON[item].id) {
						return businessJSON[item].name;
					}
				}
			} else {
				// 同步
				var result;
				$.ajax({
				    url: "${ctx}/business/list",
				    async:false,
				    cache: false,
				    type:"GET",
				    dataType:"json",
				    data:{},
				    context: document.body,
				    success: function(data){
				    	businessJSON = data;
				    	result = businessFormatter(val, row);
				    }
				});
				return result;
			}
		}
	
    		
    		
    	
    	var doSearch = function() {
    		$('#dg').datagrid('load',{
    			"ajOrderId":$('#orderId').textbox('getValue'),
    			"mobile":$('#mobile').textbox('getValue'),
    			"storeId":$('#storeId').combobox('getValue'),
    			"beginTime":$('#beginTime').textbox('getValue'),
    			"endTime":$('#endTime').textbox('getValue')
    		});
    	}
    	
    	var resetSearch = function() {
    		$('#orderId').textbox('setValue', '');
    		$('#mobile').textbox('setValue', '');
    		$('#beginTime').textbox('setValue', '');
    		$('#endTime').textbox('setValue', '');
    		//var data = $('#storeId').combobox('getData');
    		$('#storeId').combobox('select', "");
    	}
    
//     	var priceFormatter = function(val, row) {
//     		var num = new Number(val);
//     		num = num.toFixed(2);
//     		return "<span style='color:blue'>" + "￥" + num + "</span>";
//     	}
        
        $(function(){
        	
        	$.getJSON('${ctx}/business/list', {}, function(data) {
        		data.unshift({"id":"", "name":"=请选择="});
        		//alert(JSON.stringify(data));
        		$('#storeId').combobox({
            	    data:data,
            	    valueField:'id',
            	    textField:'name'
            	});
        	});
        	
        	$.getJSON('${ctx}/business/list', {}, function(data) {
        		businessJSON = data;
        		$('.businessSelect').combobox({
        			editable:false,
            	    data:data,
            	    valueField:'id',
            	    textField:'name'
            	});
        		$('.businessSelect').combobox('select', data[0].id);
        	});
        	
        	
        	
            $('#dg').datagrid();
            
            //
            	<c:if test="${not empty successMessage}">
            		$.messager.show({
						title: '提示',
						msg: '${successMessage}',
						timeout:5000,
						showType:'slide'
					});
            	</c:if>
            	<c:if test="${not empty errorMessage}">
	        		$.messager.alert('错误','${errorMessage}','error');
	        	</c:if>
            
            
            //
        });    

        $(".more").click(function(){
            $(this).closest(".conditions").siblings().toggleClass("hide");
        });
    </script>
</body>
</html>